<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				
			}
		</style>
	</head>

	<body>
		<audio autoplay="autoplay" src="js/iw ix - 天空之城（钢琴版）（Cover 久石让）.mp3"></audio>
		<canvas id="myCanvas" width="1330" height="620"></canvas>

		<script type="text/javascript">
			var numbers = [
				[
					[0, 0, 1, 1, 1, 0, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 1, 1, 0],
					[0, 0, 1, 1, 1, 0, 0]
				], //0
				[
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[1, 1, 1, 1, 1, 1, 1]
				], //1
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 1, 1, 1, 1, 1]
				], //2
				[
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //3
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 0],
					[0, 0, 1, 1, 1, 1, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 1, 1, 0],
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 1]
				], //4
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 1, 1, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //5
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //6
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0]
				], //7
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //8
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 0, 0, 0, 0]
				], //9

				[
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0]
				], //:
			];
			var arcArr = [];

			var canvas = document.getElementById("myCanvas");
			var ctx = canvas.getContext("2d");

			var i;
			var j;

			var R = 8;
			var r, g, b;
			var img = new Image();
			img.src = "img/ntk-1901-36829.jpg";
			var balls = [];
			img.onload = function() {
				var date = new Date();
				setInterval(function() {
					ctx.clearRect(0, 0, 1330, 620);
					ctx.drawImage(img, 0, 0, 1330, 620);
					var text = [0, 0, ":", 0, 0, ":", 0, 0];
					var time = new Date();
					if(time.getMinutes() != date.getMinutes()) {
						var mgw = date.getMinutes() % 10;
						addBalls(640, 100, mgw);
						var msw1 = parseInt(time.getMinutes() / 10);
						var msw2 = parseInt(date.getMinutes() / 10);
						if(msw2 != msw1) {
							addBalls(480, 100, msw2);
						}
										
					}
					if(time.getSeconds() != date.getSeconds()) {
						var gw = date.getSeconds() % 10;
						addBalls(1020, 100, gw);
						var sw1 = parseInt(time.getSeconds() / 10);
						var sw2 = parseInt(date.getSeconds() / 10);
						if(sw2 != sw1) {
							addBalls(860, 100, sw2);
						}

					}

					if(time.getHours() != date.getHours()) {
						var hgw = date.getMinutes() % 10;
						addBalls(260, 100, hgw);
						var hsw1 = parseInt(time.getMinutes() / 10);
						var hsw2 = parseInt(date.getMinutes() / 10);
						if(hsw2 != hw1) {
							addBalls(100, 100, hgw2);
						}
					}
					date = time;
					text[0] = parseInt(date.getHours() / 10);
					text[1] = date.getHours() % 10;

					text[3] = parseInt(date.getMinutes() / 10);
					text[4] = date.getMinutes() % 10;

					text[6] = parseInt(date.getSeconds() / 10);
					text[7] = date.getSeconds() % 10;
					for(var t = 0; t < text.length; t++) {
						if(text[t] == ":") {
							text[t] = 10;
						}
						if(t == 0 || t == 1) {
							printNum(t * 160 + 100, 100, text[t]);
						} else if(t == 2) {
							printNum(t * 160 + 90, 100, text[t]);
						} else if(t == 3 || t == 4) {
							printNum(t * 160, 100, text[t]);
						} else if(t == 5) {
							printNum(t * 160 - 20, 100, text[t]);
						} else if(t == 6 || t == 7) {
							printNum(t * 160 - 100, 100, text[t]);
						}
					}
					drawBalls();
				}, 33);
			};

			function addBalls(addX, addY, num) {

				for(i = 0; i < numbers[num].length; i++) {
					var t = 2 * 10 * i;
					for(j = 0; j < numbers[num][i].length; j++) {
						var vx = Math.random() * 5 + 5;
						if(Math.random() > 0.5) {
							vx = -vx;
						}
						var vy = Math.random() * 10 + 5;
						if(Math.random() > 0.5) {
							vy = -vy;
						}
						var l = 2 * 10 * j;
						var r = parseInt(Math.random() * 256);
						var g = parseInt(Math.random() * 256);
						var b = parseInt(Math.random() * 256);
						var a = Math.random();
						if(numbers[num][i][j] == 1) {
							balls.push([addX + l, addY + t, 10, vx, vy, "rgba(" + r + "," + g + "," + b + "," + a + ")"]);
						}
					}
				}

			}

			function drawBalls() {
				for(var i = 0; i < balls.length; i++) {
					ctx.beginPath();
					ctx.fillStyle = balls[i][5];
					ctx.arc(balls[i][0], balls[i][1], balls[i][2], 0, 2 * Math.PI);
					ctx.fill();
					balls[i][0] += balls[i][3];
					balls[i][1] += balls[i][4];
					balls[i][4] += 3;
					balls[i][2] = balls[i][2] - Math.random() * 0.1;

					if(balls[i][1] > 600 - balls[i][2]) {
						balls[i][4] = -balls[i][4];
						balls[i][4] = 0.5 * balls[i][4];
						balls[i][1] = 600 - balls[i][2];
					}
					if(balls[i][2] < Math.random() * 2) {
						balls.splice(i, 4);
					}

				}
			}

			function printNum(arcX, arcY, num) {
				var print = numbers[num];
				for(i = 0; i < print.length; i++) {
					var Y = 2 * R * i + arcY;
					for(j = 0; j < print[i].length; j++) {
						var X = 2 * R * j + arcX;
						if(print[i][j] == 1) {
							ctx.beginPath();

							ctx.fillStyle = "aliceblue";
							ctx.arc(X, Y, R, 0, 2 * Math.PI);
							ctx.fill();
						}
					}
				}
			}
		</script>
	</body>

</html>